<cnsl-detail-layout *ngIf="form$ | async as form" [hasBackButton]="true" title="{{ 'USER.PASSWORD.TITLE' | translate }}">
  <p class="password-info cnsl-secondary-text" sub>{{ 'USER.PASSWORD.DESCRIPTION' | translate }}</p>
  <ng-container *ngIf="id$ | async as id">
    <form [formGroup]="form" (ngSubmit)="setInitialPassword(id, form)">
      <input
        *ngIf="username$ | async as username"
        class="hiddeninput"
        type="hidden"
        autocomplete="username"
        name="username"
        type="text"
        [value]="username"
      />

      <div class="password-content">
        <div class="side-by-side">
          <cnsl-form-field class="formfield">
            <cnsl-label>{{ 'USER.PASSWORD.NEW' | translate }}</cnsl-label>
            <input cnslInput autocomplete="off" name="password" formControlName="password" type="password" />
          </cnsl-form-field>
          <cnsl-form-field class="formfield">
            <cnsl-label>{{ 'USER.PASSWORD.CONFIRM' | translate }}</cnsl-label>
            <input cnslInput autocomplete="off" name="passwordRepeat" formControlName="confirmPassword" type="password" />
          </cnsl-form-field>
        </div>

        <div class="validation" *ngIf="passwordPolicy$ | async as passwordPolicy">
          <cnsl-password-complexity-view [policy]="passwordPolicy" [password]="password(form)">
          </cnsl-password-complexity-view>
        </div>
      </div>

      <button class="submit-button" [disabled]="form.invalid" mat-raised-button color="primary">
        {{ 'USER.PASSWORD.SET' | translate }}
      </button>
    </form>
  </ng-container>

  <ng-container *ngIf="(id$ | async) === undefined && (user$ | async) as user">
    <form [formGroup]="form" (ngSubmit)="setPassword(form, user)">
      <input
        *ngIf="username$ | async as username"
        class="hiddeninput"
        type="hidden"
        autocomplete="username"
        name="username"
        type="text"
        [value]="username"
      />

      <div class="password-content">
        <cnsl-form-field class="formfield">
          <cnsl-label>{{ 'USER.PASSWORD.OLD' | translate }}</cnsl-label>
          <input cnslInput autocomplete="off" name="password" type="password" formControlName="currentPassword" />
        </cnsl-form-field>

        <div class="validation between" *ngIf="passwordPolicy$ | async as passwordPolicy">
          <cnsl-password-complexity-view [policy]="passwordPolicy" [password]="newPassword(form)">
          </cnsl-password-complexity-view>
        </div>

        <div class="side-by-side">
          <cnsl-form-field class="formfield">
            <cnsl-label>{{ 'USER.PASSWORD.NEW' | translate }}</cnsl-label>
            <input cnslInput autocomplete="off" name="new password" type="password" formControlName="newPassword" />
          </cnsl-form-field>
          <cnsl-form-field class="formfield">
            <cnsl-label>{{ 'USER.PASSWORD.CONFIRM' | translate }}</cnsl-label>
            <input
              cnslInput
              autocomplete="off"
              name="password repeating"
              type="password"
              formControlName="confirmPassword"
            />
          </cnsl-form-field>
        </div>
      </div>
      <button class="submit-button" [disabled]="form.invalid" mat-raised-button color="primary">
        {{ 'USER.PASSWORD.RESET' | translate }}
      </button>
    </form>
  </ng-container>
</cnsl-detail-layout>
